<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>微电影管理系统</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/resource/static/base/images/logo.png">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/admin/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/fonts/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/admin/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/admin/dist/css/skins/_all-skins.min.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resource/static/admin/plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resource/static/jwplayer/skins/stormtrooper.css">
    <style>
        *{
            font-family:"Microsoft YaHei";
        }
        .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
            vertical-align:middle;
            text-align:center;
        }

    </style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <%@include file="../5-public/AdminSidebar.jsp"%>

    <div class="content-wrapper">
        <!--内容-->
        <section class="content-header">
            <h1>微电影管理系统</h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 电影管理</a></li>
                <li class="active">添加电影</li>
            </ol>
        </section>
        <section class="content" id="showcontent">
            <div class="row">
                <div class="col-md-12">
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="box-title">添加电影</h3>
                        </div>
                        <form role="form" id="submitForm">
                            <div class="box-body">
                                <div class="form-group">
                                    <label for="input_title">片名</label>
                                    <input type="text" class="form-control" id="input_title" placeholder="请输入片名！">
                                </div>
                                <div class="form-group">
                                    <label for="input_url">文件</label>
                                    <input type="file" id="input_url" accept="video/*" onchange="upload(this)">
                                    <div style="margin-top:5px;">
                                        <div id="moviecontainer" ></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="input_info">介绍</label>
                                    <textarea class="form-control" rows="10" id="input_info"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="input_logo">封面</label>
                                    <input type="file" id="input_logo" accept="image/*" onchange="upload(this)">
                                    <img id="uploadImg" src="${pageContext.request.contextPath}/resource/static/ionicons/png/512/alert.png"
                                         style="margin-top:5px;" class="img-responsive"
                                         fileName="" fileName1=""
                                         alt=""width="200" height="200">
                                </div>
                                <div class="form-group">
                                    <label for="input_star">星级</label>
                                    <select class="form-control" id="input_star">
                                        <option value="1">1星</option>
                                        <option value="2">2星</option>
                                        <option value="3">3星</option>
                                        <option value="4">4星</option>
                                        <option value="5">5星</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="input_tag_id">标签</label>
                                    <select class="form-control" id="input_tag_id">
                                        <c:forEach items="${requestScope.tagList}" var="tagList">
                                            <option value="${tagList.tagId}">${tagList.tagName}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="input_area">地区</label>
                                    <input type="text" class="form-control" id="input_area" placeholder="请输入地区！">
                                </div>
                                <div class="form-group">
                                    <label for="input_length">片长</label>
                                    <input type="text" timestamp="" class="form-control" id="input_length" placeholder="请输入片长！">
                                </div>
                                <div class="form-group">
                                    <label for="input_release_time">上映时间</label>
                                    <input type="text" class="form-control" id="input_release_time"
                                           placeholder="请选择上映时间！">
                                </div>
                            </div>
                            <div class="box-footer">
                                <button type="button" onclick="submitData()" class="btn btn-primary">保存视频</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
        <!--内容-->
    </div>
    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>版本</b> 1.0
        </div>
        <strong>版权 &copy; 2017-2018 归<a href="">xxx</a>.</strong> 所有
    </footer>
    <div class="control-sidebar-bg"></div>
</div>
<script src="${pageContext.request.contextPath}/resource/static/admin/plugins/jQuery/jQuery-2.2.0.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/admin/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/admin/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/admin/plugins/fastclick/fastclick.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/admin/dist/js/app.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/admin/dist/js/demo.js"></script>
<script src="//cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/admin/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/admin/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js" charset="UTF-8"></script>
<!--播放页面-->
<script src="${pageContext.request.contextPath}/resource/static/jwplayer/jwplayer.js"></script>
<script type="text/javascript">
    jwplayer.key = "P9VTqT/X6TSP4gi/hy1wy23BivBhjdzVjMeOaQ==";

</script>
<script type="text/javascript">

</script>
<script>
    $(document).ready(function(){
        $('#input_release_time').datepicker({
            autoclose: true,
            format: 'yyyy-mm-dd',
            language: 'zh-CN',
        });
    });

    //图片和 视频的上传功能
    function upload(fileDom) {
        //获取文件
        var file = fileDom.files[0];
        //判断类型
        let fileType = file.type.split("/")[0];
        //判断大小
        if (file.size > 524288000 ) {
            alert("文件过大")
            return;
        }
        //数据格式化
        let formData = new FormData();
        formData.append("uploadFile", file);
        formData.append("fileType",fileType)

        //上传图片和视频
        $.ajax({
            url: "/admin/upload",
            type: "post",
            data: formData,
            contentType: false,
            processData: false,
            dataType: "json",
            mimeType: "multipart/form-data",
            success: function (res) {
                if (res.data.fileType=="video"){
                    $('#uploadImg').attr("fileName1",res.data.fileName)
                    jwplayer("moviecontainer").setup({
                        flashplayer: "${pageContext.request.contextPath}/resource/static/jwplayer/jwplayer.flash.swf",

                        playlist: [{
                            file: "${pageContext.request.contextPath}"+res.data.src,
                            title: "视频编号"+res.data.fileUUid
                        }],
                        modes: [{
                            type: "html5"
                        }, {
                            type: "flash",
                            src: "${pageContext.request.contextPath}/resource/static/jwplayer/jwplayer.flash.swf"
                        }, {
                            type: "download"
                        }],
                        skin: {
                            name: "vapor"
                        },
                        "playlist.position": "left",
                        "playlist.size": 200,
                        height: 250,
                        width: 387,

                    });
                }else {
                    $('#uploadImg').attr("src","${pageContext.request.contextPath}"+res.data.src)
                    $('#uploadImg').attr("fileName",res.data.fileName)
                }

                  $('#input_length').attr("timestamp",res.data.input_length)
                  $('#input_length').attr("value",res.data.input_length_str)
            },
            beforeSend: function () {
            },
            error: function () {

            }
        });
    }


    function checkIfItIsEmpty(obj) {
        if (obj==''||obj==null){
            return false
        }else
            return true;
    }

    //汇总所有数据上传数据库
    function submitData() {
        //标签
        let input_tag_id = $('#input_tag_id option:selected').val();
        //视频名称
        let input_title = $('#input_title').val();
        //星级
        let input_star = $('#input_star option:selected').val();
        //地区
        let input_area = $('#input_area').val();
        //片长
        let input_length = $('#input_length').attr("timestamp");
        //描述
        let input_info = $('#input_info').val();
        //上映时间
        let input_release_time = $('#input_release_time').val();
        //获取用户名
        let upload_user_id=''+${sessionScope.adminId};
        //获取封面名称
        let imageName = $('#uploadImg').attr("fileName");
        //获取视频名称
        let videoName = $('#uploadImg').attr("fileName1");

        if (
            checkIfItIsEmpty(input_tag_id)&&
            checkIfItIsEmpty(input_title)&&
            checkIfItIsEmpty(input_star)&&
            checkIfItIsEmpty(input_area)&&
            checkIfItIsEmpty(input_length)&&
            checkIfItIsEmpty(input_info)&&
            checkIfItIsEmpty(input_release_time)&&
            checkIfItIsEmpty(upload_user_id)&&
            checkIfItIsEmpty(imageName)&&
            checkIfItIsEmpty(videoName)
        ){
            let fromData={
                "input_tag_id": input_tag_id,
                "input_title":input_title ,
                "input_star":input_star ,
                "input_area": input_area,
                "input_length":input_length ,
                "input_info":input_info ,
                "input_release_time": input_release_time,
                "upload_user_id":upload_user_id ,
                "imageName": imageName,
                "videoName": videoName
            }

            $.ajax({
                url:"/admin/addNewVideo",
                data:fromData,
                type:"post",
                dataType:"json",
                success :function (res){
                    if (res.code==200){
                        alert("上传成功")
                        location.href="/admin/goAddMovie"

                    }
                },
                error:function (e1,e2,e3){
                    console.log(e2);
                }
            })

        }else {
            alert("存在未填写数据")
        }


    }

</script>

</body>
</html>